<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Grima Portal</title>
	<link rel="stylesheet" type="text/css" href="css/themes/bootstrap/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/icon.css">
	<link rel="stylesheet" type="text/css" href="css/portal.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	
    <div id="header" data-options="region:'north',border:false"></div>
    <div id="menu" data-options="region:'west',split:true,title:' '" style="width:250px;"></div>
    <div data-options="region:'east',split:true,collapsed:true,title:' '" style="width:250px;padding:10px;"></div>
    <div id="footer" data-options="region:'south',border:false"></div>
    <div data-options="region:'center',title:'Ordens'">
	<table id="dg" class="easyui-datagrid" title=""
			data-options="rownumbers:true,singleSelect:true,url:'orders.json',method:'get',toolbar:'#tb',pagination:true, fitColumns:true,onClickRow: onClickRow">
		<thead>
			<tr>
				<th data-options="field:'id',width:50">ID</th>
				<th data-options="field:'partnerId',width:70">Cliente</th>
				<th data-options="field:'partnerDescription',width:150">Descrição</th>
				<th data-options="field:'createdOn',width:80,align:'left'">Data Criação</th>
				<th data-options="field:'processInstanceId',width:70,align:'left'">Processo</th>
				<th data-options="field:'status',width:120">Status</th>
				<th data-options="field:'collection',width:150">Coleção</th>
				<th data-options="field:'segment',width:100,align:'left'">Segmento</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="padding:5px;height:auto">
		<div style="margin-bottom:5px">
			<a href="orderDetails.html" title="Novo" ><i class="fa fa-plus" style="font-size:18px;color:green;padding:5px;"></i>Novo</a>
			<a href="orderDetails.html" title="Detalhes"><i class="fa fa-list" style="font-size:18px;color:green;padding:5px;"></i>Detalhes</a>
			<a href="orderDetails.html" title="Editar"><i class="fa fa-edit" style="font-size:18px;color:green;padding:5px;"></i>Editar</a>
			<a href="#" title="Excluir" onclick="confirmDelete();"><i class="fa fa-trash-o" style="font-size:18px;color:green;padding:5px;"></i>Excluir</a>
			<a href="#" title="Histórico" onclick="history();"><i class="fa fa-history" style="font-size:18px;color:green;padding:5px;"></i>Histórico</a>
			<a href="#" title="Arquivos" onclick="explorer();"><i class="fa fa-folder-open" style="font-size:18px;color:green;padding:5px;"></i>Arquivos</a>
		</div>
		<br/>
		<div>
			Cliente: <input style="width:80px"> <a href="#" title="Selecionar Cliente"><i class="fa fa-toggle-up" style="font-size:18px;color:gray;padding-right:7px;"></i></a>
			Data Criação: <input class="easyui-datebox" style="width:80px">
			Até: <input class="easyui-datebox" style="width:80px">
			
			Status: 
			<select class="easyui-combobox" panelHeight="auto" style="width:100px">
				<option value=""></option>
				<option value="nova">Nova</option>
				<option value="planejada">Planejada</option>
				<option value="pecas recebidas">Peças Enviadas</option>
				<option value="finalizada">Finalizada</option>
			</select>
			<a href="#" class="easyui-linkbutton" iconCls="icon-search">Pesquisar</a>
		</div>
	</div>
    </div>

<div id="history" class="easyui-window" title="Histórico" data-options="modal:true,closed:true" style="width:800px;height:500px;padding:10px;">
	<div style="margin:5px">
		<a href="#" title="Voltar" onclick="closeHistory();"><i class="fa fa-mail-reply" style="font-size:18px;color:green;padding:5px;"></i>Voltar</a>
	</div>
	<br/>
	  
	<table id="dgHistory" class="easyui-datagrid" title=""
			data-options="rownumbers:true,singleSelect:true,url:'history.json',method:'get',pagination:true,fitColumns:true">
		<thead>
			<tr>
				<th data-options="field:'date',width:80">Data</th>
				<th data-options="field:'time',width:60">Hora</th>
				<th data-options="field:'user',width:70">Usuário</th>
				<th data-options="field:'field',width:70">Campo</th>
				<th data-options="field:'from',width:100">Alterado De</th>
				<th data-options="field:'to',width:100">Para</th>
			</tr>
		</thead>
	</table>
</div>

	<script>
		function search(){
		}
		function onClickRow(index){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				//$.messager.alert('Info', row.id+":"+row.name);
			}
		}
		function confirmDelete(){
			$.messager.confirm('Aviso', 'Confirma exclusão?', function(r){
				if (r){
					//alert('confirmed: '+r);
				}
			});
		}
		function history(){
			$('#history').window('open');
		}
		function closeHistory(){
			$('#history').window('close');
		}

	</script>
	
	<script>
		$('#header').load('header.html');
		$('#footer').load('footer.html');
		$('#menu').load('menu.html');
	</script>
	

</body>
</html>